<template>
  <div class="scroll-view">
    <scroll-view
      class="scroll-view-container"
      scroll-y="true"
      @scrolltolower="scrollToLower"
      @scrolltoupper="scrollToUpper"
      lower-threshold="30"
      upper-threshold="0"
    >
      <div class="data-loading" v-show="refresh">下拉刷新中</div>
      <section v-for="(item, index) in list" :key="index">
        <div class="list" v-if="item.d === 2" @click="toDetail(item.cu)">
          <h4>{{ item.t }}</h4>
          <img :src="item.img[0]" />
          <p>{{ item.o }}</p>
        </div>
        <div class="list2" v-else-if="item.d === 4" @click="toDetail(item.cu)">
          <h4>{{ item.t }}</h4>
          <div class="d-flex">
            <img v-for="(item1, index1) in item.img" :key="index1" :src="item1" class="flex-1" />
          </div>
          <p>{{ item.o }}</p>
        </div>
        <div class="list3 d-flex space-between" v-else @click="toDetail(item.cu)">
          <div class="flex-2 d-flex column space-between">
            <p>{{ item.t }}</p>
            <span>{{ item.o }}</span>
          </div>
          <img :src="item.img[0]" class="flex-1" />
        </div>
      </section>
      <div class="data-loading" v-show="hidden">数据加载中...</div>
    </scroll-view>
  </div>
</template>
<script>
import md5 from 'js-md5'

export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      refresh: false, // 刷新
      hidden: false,
      ifScrollUpper: false // 判断是否是下拉刷新动作
    }
  },
  onLoad() {
    this.getInfoDetail()
  },
  methods: {
    // 获取信息流详情
    getInfoDetail() {
      const aid = '837d14e0b693f961'
      const pid = '1db990bec731c9d06951002b1c7b0811'
      const u = 'wx'
      const v = '1.0.0'
      const m = 'wx'
      const d = ''
      const t = Date.now()
      const s = md5(u + '&' + v + '&' + m + '&' + d + '&' + t + '&' + aid)
      wx.request({
        url: 'https://nav.gionee.com/feed/list.do',
        method: 'GET',
        data: {
          aid,
          pid,
          u,
          v,
          m,
          d,
          t,
          s,
          cid: this.id,
          size: 10,
          na: 1
        },
        success: res => {
          if (!this.ifScrollUpper) {
            this.list = this.list.concat(res.data.data)
            this.hidden = false
          } else {
            this.list = [...res.data.data, ...this.list]
            this.refresh = false
          }
          wx.hideLoading()
        },
        fail: err => {
          console.log(err)
          wx.showLoading({
            title: '请检查网络'
          })
          setTimeout(function() {
            wx.hideLoading()
          }, 5000)
        }
      })
    },
    // 上拉加载
    scrollToLower() {
      this.ifScrollUpper = false
      this.hidden = true
      this.getInfoDetail()
    },
    // 下拉刷新
    scrollToUpper() {
      this.ifScrollUpper = true
      this.refresh = true
      wx.showLoading({
        title: '加载中'
      })
      this.getInfoDetail()
    },
    // 跳转到详情页
    toDetail(val) {
      wx.setStorageSync('url', val)
      wx.navigateTo({
        url: '/pages/web-view/main'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.scroll-view {
  .scroll-view-container {
    height: 100vh;
  }
  // .refresh {
  //   text-align: center;
  //   margin: 10px 0;
  // }
  section {
    // height: 110px;
    padding: 0 10px;
  }
  .data-loading {
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
  }
  h4 {
    margin: 0 0 10px;
    font-size: 16px;
  }
  p {
    font-size: 12px;
    color: #ccc;
    margin-top: 10px;
  }
  .list {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    img {
      width: 100%;
      height: 200px;
    }
  }
  .list2 {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    img {
      height: 90px;
      &:nth-child(2) {
        margin: 0 5px;
      }
    }
  }
  .list3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 0;
    p {
      margin: 0;
      font-size: 16px;
      color: #000;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    span {
      font-size: 12px;
      color: #ccc;
    }
    img {
      height: 90px;
    }
  }
}
</style>

